iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

新手初探 Vue系列 第 7

鐵人賽Day07 - 修飾符

  • 分享至 

  • xImage
  •  

先前有講到 v-onv-bind 指令
v-on 用在事件上,v-bind 用在綁定標籤的屬性上
而這些指令其實是有修飾符可以用的,意指縮寫。

拿前面章節的程式碼來做說明:

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" v-on:click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: ''
  },
  methods: {
      reverseText: function(){
          consle.log('HELLO');
      }
  }
});
</script>

上述是最原始的方式,假設我們要在 button 元素的 v-on 上用上修飾符:

<div id="app">
  <input type="text" class="form-control" v-model="text">
  <button class="btn btn-primary mt-1" @click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

可以發現被 @ 代替了
再來如果我們想要 input 元素的 class 也用上 v-bind 添加並用上修飾符的話
則會變成如下:

<div id="app">
  <input type="text" :class="className" v-model="text">
  <button class="btn btn-primary mt-1" @click="reverseText">反轉字串</button>
  <div class="mt-3">
    {{ newText }}
  </div>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    text: '',
    newText: '',
    className: 'form-control'
  },
  methods: {
      reverseText: function(){
          consle.log('HELLO');
      }
  }
});
</script>

可以發現本來應該是 v-bind:class="className" 變成 :class="className"
v-bind: 取代了

再額外補充一點,按鈕元素有時候我們會用 a 標籤來撰寫

<a href="#" class="btn btn-primary" @click="reverseText">反轉字串</a>

但會發現 a 有預設 href 這個屬性的行為,當我們想要取消這個預設行為時,我們可以直接在 @click 後面加上 .prevent 意即 @click.prevent="reverseText"
這時候就會取消預設行為了


上一篇
鐵人賽Day06 - v-on 綁定頁面行為
下一篇
鐵人賽Day08 - 動態加上 class
系列文
新手初探 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言